// 封装一个useWindowScroll函数
import { computed, ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
// import dayjs from 'dayjs'

export function useWindowScroll () {
  const yRef = ref(0)
  // 写滚动逻辑
  window.addEventListener('scroll', () => {
    // 拿到当前滚动的距离  然后交给响应式的yRef
    const scrollTop = document.documentElement.scrollTop
    yRef.value = scrollTop
  })
  return {
    y: yRef
  }
}

// 封装监听函数
export function useObserve (apiFn) {
  const target = ref(null) // 获取真实的dom元素
  // stop是一个可执行的函数 用来手动停止监听 stop()
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting: 当前监听的元素是否成功进入到视口区域如果进来了就是true 否则就是false
      console.log(isIntersecting)
      // 有了一个判断是否进入视口区域的条件 如果为true就发送请求
      if (isIntersecting) {
        // 可能随着业务不同调用接口函数也不同
        apiFn()
        // 发送请求之后 立刻停止监听
        stop()
      }
      // 监听处理不是只进行一次的 每次进入移出视口都会再次执行回调
    },
    // 0 - 1 数值越大代表 要求进入的面积越大才能触发回调函数
    { threshold: 0 }
  )
  // 只要调用当前函数就会return出去一个全新的对象中包含 target
  // 每一个组件中都可以使用独立的target ref对象和自己要监听的元素对象做绑定处理  互相不影响
  return {
    target
  }
}

// 倒计时函数
export function useCountDown () {
  const countTime = ref(0)
  const formatCountTime = computed(() => {
    return 1
    // return dayjs.unix(countTime.value).format('mm分ss秒')
  })
  // 倒计时：核心逻辑？ 每隔1s让countTime减一  setInterval  contTime--
  // 给到我们的功能：
  // 1. 每隔1s种执行一下我们自己的逻辑
  // 2. 导出俩个方法 一个用来开始 一个用来暂停
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    if (countTime.value === 0) {
      return
    }
    countTime.value--
  }, 1000)
  function start (time) {
    countTime.value = time
    // 开始倒计时
    resume()
  }
  return {
    countTime,
    formatCountTime,
    start,
    pause
  }
}
